<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="fonts">
      <el-breadcrumb-item :to="{ path: '/shop' }"
        >内容管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>4S店管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div style="width: 500px">
      <el-input
        v-model="input"
        placeholder="请输入要查询的4S店名"
        class="floatl"
        style="width: 300px"
      ></el-input>
      <el-button
        type="primary"
        class="floatl"
        style="margin-left: 30px"
        @click="chaxun"
        >搜索</el-button
      >
      <el-button
        type="primary"
        class="floatl"
        style="margin-left: 30px"
        @click="resets"
        >重置</el-button
      >
    </div>

    <div>
      <br />
      <br />
      <el-button type="primary" style=" margin-top: 10px"
        ><router-link to="/shopfs">+ 添加4S店</router-link></el-button
      >
      <el-button type="primary" @click="exportExportA">+ 导出数据</el-button>
      <!-- 表格导出预览 -->
      <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow" >
        <el-table :data="tableData" id="selectTable" height="380px">
          <el-table-column prop="id" label="id"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>

          <el-table-column prop="shortName" label="短名"> </el-table-column>
          <el-table-column prop="cname" label="店铺主修品牌"> </el-table-column>
          <el-table-column prop="discount" label="店铺折扣"> </el-table-column>
          <el-table-column prop="area" label="区域"> </el-table-column>
          <el-table-column prop="location" label="地址"> </el-table-column>
          <el-table-column prop="sign" label="是否签约"> </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="exportExcel">确定保存</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table :data="tableData" style="width: 100% " id="storetable">
      <el-table-column prop="id" label="编号" width="60px" align="center">
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="80px" align="center">
      </el-table-column>
      <el-table-column prop="shortName" label="短名称" align="center">
      </el-table-column>
      <el-table-column prop="cname" label="店铺主修品牌" align="center">
      </el-table-column>
      <el-table-column prop="discount" label="店铺折扣" align="center">
      </el-table-column>
      <el-table-column prop="area" label="区域" align="center">
      </el-table-column>
      <el-table-column prop="location" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="sign" label="是否签约" align="center">
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center">
        <template scope="scope" class="active">
          <el-button
            type="primary"
             @click="modification(scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
        </template>

        
      </el-table-column>
    </el-table>
    <div class="block" align="center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import htmlToExcel from "@/excel/htmlToExcel.js";
export default {
  data() {
    return {
      selectWindow: false,
      state: 1,
      total: 0,
      pageSize: 10,
      input: "",
      tableData: [],
      
      id: "",
      list: [],
      idc: "",
    };
  },

  mounted() {
    this.http(1);
    this.changepage();
  },
  methods: {

    resets(){
      this.http()
      this.input=""
    },

    //传分页数据+渲染列表
    http(page) {
      this.$axios({
        url: "/S4Manage/list",
        method: "post",
        data: {
          limit: this.pageSize,
          page: page,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 0) {
            // console.log("请求成功"+res);
            res.data.data.forEach((item) => {
              // console.log(item);
              this.tableData = res.data.data;
              this.total = res.data.count;
            });
          }
        })
        .catch((err) => {
          //否则执行失败
          console.log("请求失败" + err);
        });
    },
    //每页几条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    //调取分页封装的函数方法
    handleCurrentChange(val) {
      //
      this.http(val);
    },

    //搜索输入框
    chaxun() {
      if (this.input == "") {
        return;
      }
      this.$axios({
        url: "/S4Manage/list",
        method: "post",
        data: {
          name: this.input,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code === 0) {
          this.list = res.data.data;
          this.total = res.data.count; //将条数传到total,会自己判断页数
          this.tableData = this.list.slice(0, 3); //截取0到第三条数据渲染
          this.state = 2;
        }
      });
    },
    //分页
    changepage(page) {
      if (this.state == 1) {
        this.http(page);
      } else {
        this.tableData = this.list.slice(
          (page - 1) * this.pageSize,
          page * this.pageSize
        );
      }
    },

    //excel导出
    exportExportA() {
      if (this.tableData.length < 1) {
        this.$message.error("请选择要导出的内容！");
        return false;
      }
      this.selectWindow = true;
    },

    exportExcel() {
      htmlToExcel.getExcel("#selectTable", "4S店列表");
    },

    //修改
    modification(row) {
    // console.log(scope.row);
      sessionStorage.setItem("store", JSON.stringify(row));
      this.$router.push({ path: "/amendfs" });
    },
  },
};
</script>

<style scoped>
.floatl {
  float: left;
}
a {
  text-decoration: none;
  color: white;
}
.fonts{
  font-size: 20px;
}
</style>
